<template>
	<view class="ljapp">
		<view class="card">
			<view class="title">请如实填写您的预约信息</view>

			<u--form labelWidth="auto" :labelStyle="{fontSize:'28rpx',color:'#333'}">
				<u-form-item label="真实姓名" required borderBottom>
					<u--input v-model="obj.name" border="none" inputAlign="right" fontSize="24rpx"
						placeholderStyle="color: #c2c2c2" placeholder="输入您真实姓名"></u--input>
				</u-form-item>
				<u-form-item label="性别" required borderBottom>
					<view class="u-flex" style="width: 100%;">
						<view class="u-flex-10"></view>
						<u-radio-group size="33rpx" activeColor="#12b3f1" v-model="obj.sex">
							<u-radio label="男" name="1" labelSize="24rpx"></u-radio>
							<u-radio label="女" name="2" labelSize="24rpx"></u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item label="联系方式" required borderBottom>
					<u--input v-model="obj.mobile" border="none" inputAlign="right" fontSize="24rpx"
						placeholderStyle="color: #c2c2c2" placeholder="输入您手机号"></u--input>
				</u-form-item>
				<u-form-item label="预约日期" required borderBottom>
					<view style="width: 100%;" @click="showDate=true">
						<u--input v-model="obj.time" border="none" inputAlign="right" fontSize="24rpx"
							placeholderStyle="color: #c2c2c2" placeholder="选择日期" disabled
							disabledColor="transparent"></u--input>
					</view>
				</u-form-item>
			</u--form>

			<u-datetime-picker ref="datetimePicker" mode="date" :minDate="0" :show="showDate" v-model="time"
				@cancel="showDate=false" @confirm="changeDate"></u-datetime-picker>
		</view>

		<view class="btn-row">
			<view class="btn-fillet" @click="submit">立即预约</view>
		</view>

		<u-popup :show="show" :round="8" mode="center">
			<view class="popup-submit-content">
				<view class="tit">预约成功！</view>
				<!-- <view class="con">（5s后自动关闭）</view> -->
			</view>
		</u-popup>
	</view>

</template>

<script>
	import Comcity from '@/components/Comcity.vue'
	export default {
		components: {
			Comcity
		},
		data() {
			return {
				loading: false,
				reason: '',

				show: false,

				//提交需求
				obj: {
					name: '',
					sex: '1',
					mobile: '',
					time: '',
				},
				showDate: false,
				time: '',

				userInfo: {}, //用户信息
			}
		},
		onLoad() {
			var myDate = new Date();
			this.time = this.$u.timeFormat(myDate, 'yyyy-mm-dd')

			this.$Http({
				url: 'getUserInfo',
				type: 'POST',
				data: {}
			}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			})
		},
		methods: {
			changeDate(e) {
				var date1 = new Date();
				var date2 = new Date();
				date2.setDate(date1.getDate() + 6);
				var time1 = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
				var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
				
				if(this.compareDate(time1,time2)){
					this.obj.time = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
					this.showDate = false
				}else{
					return this.$u.toast('只能预约七日内的检查~')
				}

				
			},
			compareDate(date1, date2) {
				console.log(date1, date2,'7777')
				// 1.转为时间戳
				var data1 = Date.parse(date1.replace(/-/g, "/"));
				var data2 = Date.parse(date2.replace(/-/g, "/"));
				// 2.时间戳间隔 再加上一天+ 86400000
				var datadiff = data2 - data1 ;
				// 3.七天间隔
				var time = 6 * 24 * 60 * 60 * 1000;
				// 4.比较两个日期的远近，date2为最近的日期
				if (data1 > data2) {
					return false;
				} else {
					// 当间隔日期大于 规定的7天
					console.log(datadiff , time,'456')
					if (datadiff > time) {
						return false;
					} else {
						return true
					}
				}
			},
			//提交
			submit() {
				var that = this
				if (!this.obj.name) {
					return this.$u.toast('请输入真实姓名')
				}
				if (!this.obj.sex) {
					return this.$u.toast('请选择性别')
				}
				if (!this.obj.mobile) {
					return this.$u.toast('请输入手机号')
				}
				if (!this.$u.test.mobile(this.obj.mobile)) {
					return this.$u.toast('手机号格式不正确')
				}
				if (!this.obj.time) {
					return this.$u.toast('请选择预约日期')
				}

				this.$Http({
					url: 'physicalCreateOrdernew',
					data: this.obj,
					show: true,
					type: 'POST'
				}).then(res => {
					console.log('submit', res)
					if (res.code == 1) {
						that.show = true
						setTimeout(function() {
							that.show = false
							uni.redirectTo({
								url: '/pagesL/check/info?order_code=' + res.data.order_code
							})
						}, 2000)
					}
				});

			}
		}
	}
</script>

<style lang="less">
	@import '@/pagesB/style.less';

	.popup-submit-content {
		text-align: center;
		padding: 24rpx;
		min-width: 396rpx;
	}

	.card {
		margin: 20rpx;
		padding-top: 26rpx;
		padding-left: 16rpx;
		padding-right: 15rpx;
		padding-bottom: 40rpx;

		.title {
			position: relative;
			padding-left: 34rpx;
			height: 42rpx;
			line-height: 42rpx;
			font-weight: 500;
			margin-left: 20rpx;
			margin-bottom: 10rpx;

			&:after {
				position: absolute;
				top: 0;
				left: 0;
				content: '';
				width: 6rpx;
				height: 42rpx;
				border-radius: 42rpx;
				background-color: #12b3f1;
				overflow: hidden;
			}
		}

		/deep/.u-form-item__body {
			padding: 24rpx 0 22rpx;
		}

		/deep/.u-form-item__body__left {
			padding-left: 52rpx !important;
		}

		/deep/.u-line {
			border-color: #f5f5f5 !important;
			border-width: 2px !important;
		}

		/deep/.u-form-item__body__right__content {
			padding-right: 54rpx;
		}

		/deep/.u-form-item__body__left__content__required {
			font-weight: 700;
			left: -24rpx;
			color: #ff0707;
		}

		/deep/.u-radio {
			margin-left: 34rpx;
		}

		/deep/.u-textarea {
			padding: 10rpx 24rpx;
			padding-right: 18rpx;
		}

		/deep/.u-upload {
			padding-left: 28rpx;
		}

		/deep/.u-upload__button {
			margin: 0;
			border-radius: 10rpx;
			background-color: #f1f1f1;
			width: 192rpx !important;
			height: 174rpx !important;

			.u-icon__icon {
				font-size: 70rpx !important;
			}
		}

		/deep/.u-upload__button__text {
			font-size: 22rpx;
			color: #999;
		}
	}

	.btn-fillet {
		width: 300rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		color: #fff;
		border-radius: 10rpx;
		background-color: #12b3f1;
		box-shadow: 0 6rpx 6rpx #ace0f3;
		margin: 30rpx auto;
	}
</style>